<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS 属性总结</title>

</head>
<body>
<table border="1" >
    <caption><h1>CSS 属性总结</h1></caption>
    <thead>
    <tr>
        <th>分类</th>
        <th>属性名</th>
        <th>作用</th>
        <th>属性值</th>
        <th>备注</th>
    </tr>
    </thead>
    <tbody>
    <!-- 修改与美化 -->
    <tr>
        <td rowspan="4">修改与美化</td>
        <td>list-style</td>
        <td>列表样式</td>
        <td>none</td>
        <td>去掉列表项前标识符</td>
    </tr>
    <tr>
        <td>border-radius</td>
        <td>边框圆角</td>
        <td>5px 或 10%<br>10px<br>10px 20px 30px<br>10px 20px 30px 40px</td>
        <td>像素值或百分比，四个角弧度统一<br>左上右下 右上左下 对角线<br>从左上角开始顺时针给四个角度设置</td>
    </tr>
    <tr>
        <td>border-{top}-{left}-radius</td>
        <td>只设置某一个角</td>
        <td>5px 或 10%</td>
        <td>left/right/top/bottom换关键字换角</td>
    </tr>
    <tr>
        <td>box-shadow</td>
        <td>元素阴影</td>
        <td>值1: 5px<br>值2: 5px<br>值3: 5px<br>值4: 5px<br>值5: #aaa<br>值6: outset</td>
        <td>必写，阴影的X轴偏移量，默认向右移动<br>必写，阴影的Y轴偏移量，默认向下移动<br>羽化值，越大阴影越虚化，默认0，不许负值<br>扩展半径，越大阴影范围越大，默认0<br>阴影颜色<br>默认外阴影outset 内阴影inset</td>
    </tr>

    <!-- 浮动 -->
    <tr>
        <td rowspan="2">浮动</td>
        <td>float</td>
        <td>左浮动<br>右浮动</td>
        <td>left<br>right</td>
        <td>向父级元素的左侧边界靠拢<br>向父级元素的右侧边界靠拢</td>
    </tr>

    <!-- 定位 -->
    <tr>
        <td rowspan="4">定位</td>
        <td>position</td>
        <td>定位方式</td>
        <td>static<br>relative<br>absolute<br>fixed</td>
        <td>静态定位(默认值)，原来的文档流布局<br>相对定位，参照自己原来的位置<br>绝对定位，参照最近的非静态祖先元素<br>固定定位，参照根元素html</td>
    </tr>
    <tr>
        <td>z-index</td>
        <td>调整层级</td>
        <td>整数值，无单位，可以有负数</td>
        <td>数字越大，层级越靠近</td>
    </tr>
    <tr>
        <td>top/right/bottom/left</td>
        <td>移动方向</td>
        <td>像素值 百分比</td>
        <td>距离参照物移动的距离，负值反方向</td>
    </tr>

    <!-- 过渡 -->
    <tr>
        <td rowspan="2">过渡</td>
        <td>transition</td>
        <td>过渡简写属性</td>
        <td>最简写执行时间就行，其他都可不写</td>
        <td>执行时间在前，延迟时间在后，其他没顺序</td>
    </tr>

    <!-- 变换 -->
    <tr>
        <td rowspan="2">变换</td>
        <td>transform</td>
        <td>旋转</td>
        <td>rotate(30deg)</td>
        <td>元素在二维空间，默认绕中心点(Z轴)旋转</td>
    </tr>
    <tr>
        <td>缩放</td>
        <td>scale()</td>
        <td>同时负责X轴与Y轴的缩放</td>
    </tr>
    </tbody>
</table>
</body>
</html>